<template>
    <div class="dialog">
        <!-- 需要添加.sync修饰符才能关闭 -->
        <el-dialog :title="dialog.title" :visible.sync="dialog.show" :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="false">
            <div class="form">
                <el-form ref="form" :model="formData" :rules="form_rules" label-width="120px" style="margin:10px;width:auto">
                    <el-form-item label="收支类型">
                        <el-select v-model="formData.type" placeholder="收支类型">
                            <el-option v-for="(formtype,index) in format_type_list" :key="index" :label="formtype" :value="formtype"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="describe" label="收支描述:">
                        <el-input type="describe" v-model="formData.describe"></el-input>
                    </el-form-item>
                    <el-form-item prop="income" label="收入:">
                        <el-input type="income" v-model="formData.income"></el-input>
                    </el-form-item>
                    <el-form-item prop="expend" label="支出:">
                        <el-input type="expend" v-model="formData.expend"></el-input>
                    </el-form-item>
                    <el-form-item prop="cash" label="账户现金:">
                        <el-input type="cash" v-model="formData.cash"></el-input>
                    </el-form-item>
                    <el-form-item label="备注:">
                        <el-input type="textarea" v-model="formData.remark"></el-input>
                    </el-form-item>
                    <el-form-item class="text_right">
                        <!-- 这里点取消验证规则如果错误再次进去就还有 -->
                        <!-- 自己在表单上加了一个关闭事件 -->
                        <el-button @click="dialog.show=false">取 消</el-button>
                        <el-button type="primary" @click="onSubmit('form')">提 交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name:'dialog',
    // 接受父组件传过来的数据
    props:{
        dialog:Object,
        formData:Object
    },
    data() {
        return {
            format_type_list:["提现", "充值", "转账", "吃", "喝", "嫖", "赌"],
            form_rules:{
                describe:[
                    {required:true,message:'收支描述不能为空！',trigger:'blur'}
                ],
                income:[
                    {required:true,message:'收入不能为空！',trigger:'blur'}
                ],
                expend:[
                    {required:true,message:'支出不能为空！',trigger:'blur'}
                ],
                cash:[
                    {required:true,message:'账户不能为空！',trigger:'blur'}
                ],
            }
        }
    },
    methods: {
        // 提交表单
        onSubmit(form){
            // console.log(this.formData)
            this.$refs[form].validate(async valid=>{
                if(valid){
                    // console.log(this.formData)
                    const url=this.dialog.option==='add'?'add':`edit/${this.formData.id}`
                    this.$axios.post(`/api/profiles/${url}`,this.formData).then((res) => {
                        this.$message.success('数据添加成功')
                    }).catch((err) => {
                        this.$message.error('数据添加失败')
                    });
                    // 隐藏dialog
                    this.dialog.show=false
                    //刷新数据
                    this.$emit('update')
                }
            })
        },
        // 对话框关闭重置表单
        // 不能再dialog中加这个 @close="addDialogClosed"
        // 加了之后提交,有验证规则的数据会变成空
        // 可能是因为请求是异步的,提交之后会触发关闭事件,先让有验证规则的数据变成空
        // 验证规则哪个时候开始验证?
        // 有机会问问
        // 用async await可以解决
        // 但是又面临一个新问题----------在类型和备注上面原来的数据没有清空（清空一下formData或者页面刷新一下应该问题不大）
        // addDialogClosed(){
        //     this.$refs.form.resetFields()
        // },
    },
}
</script>
<style scoped>

</style>